<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'height:' + touHeight +'px;'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">调整工作时长</view>
		</view>
		<view class="shuaixuan_top" :style="'top:' + touHeight +'px;'">
			<view class="shuaixuan_left">
				<view class="batch_caozuo" :class="{'active':batch==2}" @tap="batchBtn">{{piliang_text}}</view>
			</view>
			<view class="grade_paixu" :class="{'active':grade==2}" @tap="gradePaixu">按等级排序</view>
		</view>
		<view class="page_content" :style="'padding-top:' + pageTop + 'px'">
			<view class="personnel_box">
				<view class="personnel_list" :class="{'active':batch==1}" v-for="(item,index) in productList">
					<view class="xuanze" :class="item.sss==2?'active':''" @tap="onXuanze" :data-key="index"></view>
					<view class="renyuan_box" @tap='toRenyuanziliao' :data-userId="item.user_id" :data-hotelId="item.hotel_id" :data-orderId="item.order_id">
						<view class="touxiang" :style="'background: url('+item.avatar+') center center no-repeat;'"></view>
						<view class="neirong">
							<view class="name">{{item.username}}</view>
							<view class="text_box">
								<view class="old">{{item.age}}岁</view>
								<view class="gender" :class="item.gender === 1 ? 'nan' : 'nv'"></view>
								<view class="jibie">{{item.level_text}}</view>
							</view>
						</view>
						<view class="right_time"><view class="bold">{{item.hour}}</view>小时</view>
					</view>
					<view class="right_buttom">
						<view class="anniu_btn anniu_btn05" :data-orderId="item.order_id" @tap="onYigeshichang">修改时长</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 公共底部按钮 -->
		<view class="public_bottom_caozuo" :class="{'active':batch==1}">
			<view class="xuanze" @tap="onQuanxuan" :class="quanxuan==2?'active':''">全选</view>
			<div class="public_buttom_right">
				<view class="public_buttom public_buttom05" @tap="onOnshichang">批量调整工作时长</view>
			</div>
		</view>
		<!-- 调整工作时长弹窗 -->
		<view class="popup_bg" :class="{'active':shichang==1}" @tap="closePop"></view>
		<view class="shichang_popup" :class="{'active':shichang==1}">
			<view class="close_pop" @tap="closePop"></view>
			<view class="shichang_name">调整工作时长</view>
			<view class="input_box">
				<view class="name">工作时长</view>
				<input type="number" name="shichang_text" class="text_left" :value="hour" @input="shichang_text" placeholder-class="phcolor" placeholder="请填写工作时长"/>
				<view class="danwei">小时</view>
			</view>
			<view class="tips">
				<view>温馨提示：</view>
				<view>1、手动修改每个人的实际工作时长</view>
				<view>2、平台会对手动修改的工作时长进行审核，如发现情况不属实或作弊等现象将会严肃处理</view>
			</view>
			<view class="public_btn public_btn03" @tap="submitForm">确 定</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				//域名拼接
				URL: app.globalData.URL,
				touHeight: 0,
				pageTop: 0,	
				batch: 2,
				grade: 1,
				piliang_text: '批量操作',
				//用于渲染页面的数组
				productList: [],
				shichang: 2,
				quanxuan:1,//全选默认状态
				single:false,
				hour:''//表单默认值
			}
		},
		onShow(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			var query = wx.createSelectorQuery();
			query.select('.shuaixuan_top').boundingClientRect()
			query.exec(function (res) {
				that.pageTop = that.touHeight + res[0].height
			})
			
			//onshow取值方法
			// 获取当前小程序的页面栈
			var pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			var currentPage = pages[pages.length-1];
			
			//兼职ID
			that.id = currentPage.options.id;
			//默认加载数据
			var id = that.id;//兼职ID
			var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
			that.getproinfo(id,order,that)
		},
		methods: {
			
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//单选
			onXuanze(e){
				var that = this;
				var order_id = [];
				var key = e.currentTarget.dataset.key;
				//改变复选框单
				var daogangList = that.productList;
				if(daogangList[key].sss==1){
					daogangList[key].sss = 2;//确定选中
				}else{
					daogangList[key].sss = 1;
				}
				//判断是否全选
				let select = 0
				let select_all = 0
				for(let i of daogangList){
					if(i.sss == 2){
						order_id.push(i.order_id)
						select++
					}
					select_all++
				}
				if(select == select_all){
					that.quanxuan = 2
				}else{
					that.quanxuan = 1
				}
				that.order_id = order_id;
				console.log(that.order_id)
			},
			//全选
			onQuanxuan(e){
				var that = this;
				var order_id = [];
				//改变复选框单
				var daogangList = that.productList;
				if(that.quanxuan==1){//确定全部
					that.quanxuan = 2;//全选按钮
					order_id = daogangList.map(item => item.order_id)
					//选中单选状态
					for(let i of daogangList){
						i.sss = 2
					}
				}else{//确定取消
					that.quanxuan = 1;//全选按钮
					//取消单选状态
					for(let i of daogangList){
						i.sss = 1
					}
					order_id = [];
				}
				that.order_id = order_id;
				console.log(that.order_id)
			},
			//排序
			gradePaixu(){
				var that = this;
				if(that.grade==1){
					that.grade = 2;
				}else{
					that.grade = 1
				}
				that.productList = [];//清空数组
				var id = that.id;//兼职ID
				var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
				that.getproinfo(id,order,that)
			},
			
			//展开批量操作
			batchBtn(){
				var that = this;
				if(that.batch==1){
					that.batch = 2
					that.piliang_text = '批量操作'
				}else{
					that.batch = 1
					that.piliang_text = '退出批量操作'
				}
			},
			
			//单组按钮调整工作时长
			onYigeshichang(e){
				var that = this;
				that.shichang = 1
				that.single = true
				that.orderid = e.currentTarget.dataset.orderid;
			},
			//批量按钮调整工作时长
			onOnshichang(){
				var that = this;
				that.single = false
				var tips = 0
				for(let i of that.productList){
					if(i.sss == 2){
						tips++
					}
				}
				if(tips == 0){
					uni.showModal({
						title: '提示',
						content: '请先选择人员',
						showCancel: false,
						confirmColor:'#E85426',
					})	
				}else{
					that.shichang = 1;
				}
			},
			//关闭调整工作时长
			closePop(){
				var that = this;
			    that.shichang = 2
			},
			//工作时长实时监控
			shichang_text:function(e){
				var that = this;
				that.hour = e.detail.value;
			},
			
			//调整工作时长表单提交
			submitForm:function(){
				var that = this;
				that.param = []
				if(that.hour==undefined){
					uni.showModal({
						title: '提示',
						content: '请填写时长',
						showCancel: false,
						confirmColor:'#E85426',
					})	
				}else{
					if(that.single==true){
						that.param = [{order_id:that.orderid,hour:that.hour}]
						
					}else{
						for(let i of that.productList){
							if(i.sss == 2){
								that.param.push({order_id:i.order_id,hour:that.hour})
							}
						}
					}
					uni.request({
						url: app.globalData.URL + '/api/v1/Hotel/clockFix',
						method: "get",
						data:{
							param:that.param
						},
						header:{
							token: uni.getStorageSync('token')
						},
						success: function (res) {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: true,
								confirmColor:'#E85426',
								success(res){
									if(res.confirm){
										var id = that.id;//兼职ID
										var order = that.grade;//排序：1=等级由高到低，2=等级由低到高
										that.getproinfo(id,order,that)
										that.shichang = 2;
										that.hour = ''
									}
								}
							})
						}
					})
				}
			},
			
			//跳转到人员介绍
			toRenyuanziliao(e){
				var that = this;
				var user_id = e.currentTarget.dataset.userid;//用户id
				var hotel_id = e.currentTarget.dataset.userid;//酒店id
				var order_id = e.currentTarget.dataset.orderid;//订单id
				uni.navigateTo({
				    url: '/pages/business_my_center/yanshi_yonggong_ziliao/yanshi_yonggong_ziliao?user_id='+user_id+'&hotel_id='+hotel_id+'&order_id='+order_id,
				});
			},
			
			//确认完工列表
			getproinfo(id,order,that){
				var that = this;
			    uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/clockList?id='+id+'&order='+order,
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						that.productList = res.data.data;
					}
				});
			}
		}
	}
</script>

<style>
	.public_buttom_right .public_buttom{
		width: 100%;
	}
	.renyuan_box{
		background: #fff;
	}
	.public_btn{
	    margin: 0px 30rpx;
		margin-top: 60rpx;
	}
	.close_pop{
		top: 15rpx;
	}
</style>
